<template>
  <div class="changePhone">
      <a-tabs v-show="flag" default-active-key="1" size="large">
        <a-tab-pane key="1" tab="个人信息">
            <div class="form">
                <p class="title">
                    手机号：
                </p>
                <a-input v-model="phone" :disabled='true' placeholder="请输入您的手机号" />
            </div>
            <div class="form">
                <p class="title">
                    验证码：
                </p>
                <a-input v-model="smscode" placeholder="请输入验证码" />
                <p class="func" @click="getCode(3)">{{djs == '获取验证码' || djs == '重新获取验证码'?djs:djs+'秒'}}</p>
            </div>
            <div class="btn">
                <p class="back" @click="$router.go(-1)">取消</p>
                <p class="enter" @click="verifiSmscode">下一步</p>
            </div>
        </a-tab-pane>
      </a-tabs>
      <a-tabs v-show="!flag" default-active-key="1" size="large">
        <a-tab-pane key="1" tab="确认手机">
            <div class="form">
                <p class="title">
                    手机号：
                </p>
                <a-input v-model="phone" placeholder="请输入新的手机号" />
            </div>
            <div class="form">
                <p class="title">
                    验证码：
                </p>
                <a-input v-model="smscode" placeholder="请输入验证码" />
                <p class="func" @click="getCode(6)">{{djs == '获取验证码' || djs == '重新获取验证码'?djs:djs+'秒'}}</p>
            </div>
            <div class="btn">
                <p class="back" @click="$router.go(-1)">取消</p>
                <p class="enter" @click="changePhone">确认修改</p>
            </div>
        </a-tab-pane>
      </a-tabs>
  </div>
</template>

<script>
export default {
    data(){
        return {
            flag:true,
            djs:'获取验证码',
            interval:null,
            // 原手机号
            mobile:"13632323232",
            // 验证码
            vfcode:"",
            phone:"",
            smscode:""
        }
    },
    created(){
        this.mobile = this.$store.state.mobile;
        this.phone = this.$store.state.mobile;
    },
    methods:{
        // 修改手机号
        changePhone(){
            if(!this.phone){
                this.$message.error('请输入手机号')
            }else if(!/^1[3-9]\d{9}$/.test(this.phone)){
                this.$message.error('请检查手机号是否正确')
            }else if(!this.smscode){
                this.$message.error('请输入验证码')
            }else{
                this.$ajax({
                    url:"/user/userinfo/update/phone?phone="+this.phone+"&type=3&smscode="+this.smscode,
                    method:"post"
                }).then((res)=>{
                    if(res.code == 200){
                        localStorage.setItem('rememberPassword',false);
                        localStorage.setItem('userName','');
                        localStorage.setItem('password','');
                        this.$store.commit('changemobile',this.phone);
                        this.$store.commit('changeuserName',this.phone);
                        this.$message.success(res.data);
                        this.$router.push("/personalCenter/information");
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            }
            
        },
        // 确认验证码是否正确
        verifiSmscode(){
            if(this.smscode){
                this.$ajax({
                    url:"/user/userinfo/verifi/smscode?mobile="+this.phone+"&type=3&vfcode="+this.smscode,
                    method:"post"
                }).then((res)=>{
                    if(res.code == 200){
                        this.phone = '';
                        this.smscode = '';
                        this.djs = '获取验证码'
                        clearInterval(this.interval)
                        this.flag = false;
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            }else{
                this.$message.error('请输入验证码')
            }
            
        },
        getCode(e){
            if(this.djs === '获取验证码' || this.djs == '重新获取验证码'){
                this.djs = 60;
                this.interval = setInterval(()=>{
                    if(this.djs == 1){
                        this.djs = '重新获取验证码';
                        clearInterval(this.interval)
                    }else{
                        this.djs--;
                    }
                },1000)
                if(this.phone && (/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/).test(this.phone)){
                    this.$ajax({
                        url:"/user/userinfo/sendsms?type="+e+"&mobile="+this.phone,
                        method:"post",
                    }).then((res)=>{
                        if(res.code == 200){
                            this.$message.success(res.msg);
                        }else{
                            this.$message.error(res.msg)
                            this.djs = '获取验证码';
                            clearInterval(this.interval)
                        }
                    })
                }else{
                    this.$message.error("请检查手机号")
                    this.djs = '获取验证码';
                    clearInterval(this.interval)
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
    .changePhone{
        .ant-tabs-tabpane-active{
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .form{
            width: 437px;
            display: flex;
            align-items: center;
            margin-left: 56px;
            padding-bottom: 10px;
            margin-bottom: 15px;
            border-bottom: 1px solid #EEEEEE;
            .title{
                width: 80px;
                color: #666666;
                font-size: 16px;
            }
            /deep/.ant-input,.ant-calendar-picker{
                flex: 1;
                border: 0;
                list-style: none;
                box-shadow: none !important;
            }
            .func{
                color: #FFBE37;
                font-size: 16px;
                line-height: 22px;
                border-left: 2px solid #FFBE37;
                padding-left: 16px;
                cursor: pointer;
            }
        }
        .form:nth-child(3){
            border: 0;
        }
        .btn{
            display: flex;
            margin-top: 79px;
            margin-left: 56px;
            p{
                width: 108px;
                height: 40px;
                margin-right: 50px;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
            }
            .back{
                border: 1px solid #FFBE37;
                color: #FFBE37;
            }
            .enter{
                background: #FFBE37;
                color: #333333;
            }
        }
    }
</style>